/*
 * @Author: David Ma
 * @FilePath: \huaxia-real-estate-web\src\utils\showMessages.ts
 * @LastEditors: David Ma
 * @Description: 该文件用于
 * @Date: 2024-01-03 14:11:47
 */
// showMessage.ts
export default function showMessage(type: string, content: string): void {

    // 创建消息容器
    const messageContainer = document.createElement('div');

    // 创建内容元素
    const contentElement = document.createElement('p');
    contentElement.textContent = content;

    // 将图标添加到父元素中
    messageContainer.appendChild(contentElement);

    // 设置消息容器样式
    if(type === "success") {
        messageContainer.className = 'bg-green-500 text-white py-3 px-5 box-border rounded-md';
    } else if(type === "error") {
        messageContainer.className = 'bg-red-500 text-white py-3 px-5 box-border rounded-md';
    } else {
        messageContainer.className = 'bg-blue-500 text-white py-3 px-5 box-border rounded-md';
    }
       
    messageContainer.style.position = 'fixed';
    messageContainer.style.top = '-100px'; // 初始位置在顶部之外
    messageContainer.style.right = '50%';
    messageContainer.style.transform = 'translateX(+50%)';
    messageContainer.style.transition = 'top 0.5s ease-in-out'; // 添加过渡效果

    // 添加消息容器到 body
    document.body.appendChild(messageContainer);

    setTimeout(() => {
        messageContainer.style.top = '5%'; // 滑入显示
    }, 10);

    // 隐藏消息容器（2秒后）
    setTimeout(() => {
        messageContainer.style.top = '-100px'; // 滑出隐藏
        // 移除消息容器
        setTimeout(() => {
            document.body.removeChild(messageContainer);
        }, 500);
    }, 2000); // 5秒后自动隐藏
}
